<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <h2>{{ order.orderId }}</h2>
    <form @submit.prevent="saveOrder">
      <table>
        <tr>
          <td>
            <h3 align="center">Receipt Information</h3>
          </td>
        </tr>
        <tr>
          <td>OrderId:</td>
          <td>
            <input type="text" name="orderId" id="orderId" readonly="readonly" v-model="order.orderId" />
          </td>
        </tr>
        <tr>
          <td>UserId:</td>
          <td>
            <input type="text" name="userId" id="userId" readonly="readonly" v-model="order.username" />
          </td>
        </tr>
        <tr>
          <td>Order Date:</td>
          <td>
            <input type="text" name="orderDate" id="orderDate" readonly="readonly" v-model="order.orderDate" />
          </td>
        </tr>
        <tr>
          <td>Order Status:</td>
          <td>
            <select name="status" v-model="order.status">
              <option value="待发货" v-if="order.status === '待发货'">待发货</option>
              <option value="待退款" v-if="order.status === '待退款'">待退款</option>
              <option value="待收货" v-if="order.status === '待收货'">待收货</option>
              <option value="已退款" v-if="order.status === '已退款'">已退款</option>
              <option value="已完成" v-if="order.status === '已完成'">已完成</option>
              <option value="待退款">待退款</option>
              <option value="待收货">待收货</option>
              <option value="已退款">已退款</option>
              <option value="已完成">已完成</option>
              <option value="待发货">待发货</option>
            </select>
          </td>
        </tr>
        <!-- Other input fields... -->
      </table>
      <p align="center">
        <input name="editOrder" type="submit" value="Save Order Information" />
      </p>
    </form>
  </div>
  <FooterComponent/>
</template>

<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";
import axios from "axios";

export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      order: {
        orderId: '',
        username: '',
        orderDate: '',
        status: '',
      },
    };
  },
  async created(){
         await axios.post('http://localhost:8090/manage/viewChangeOrder', {
          orderId:this.$route.params.orderId
        },{
          headers:{
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          this.order = response.data.data;
         });

    },
  methods: {
    saveOrder() {
        axios.post('http://localhost:8090/manage/saveOrder',{
          order:this.order,
        },{
          headers:
              {
                'Content-Type': 'multipart/form-data'
              }
        }).then((response) => {
           this.$router.push('/manage/orderManage')
        })
      console.log(this.order);
    },
  },
};
</script>


<style scoped>
@import "@/assets/css/myAccount.css";
</style>